<template>
  <div class="main-layout">
    <Sidebar class="sidebar" />
    <div class="content">
      <div class="top-bar">
        <Header class="header" />
        <Navbar class="navbar" />
      </div>
      <router-view class="page-content" />
    </div>
  </div>
</template>

<script>
import Sidebar from "./Sidebar.vue";
import Header from "./Header.vue";
import Navbar from "./Navbar.vue";

export default {
  components: {
    Sidebar,
    Header,
    Navbar,
  },
};
</script>

<style>
.main-layout {
  display: flex;
  background-color: #f5f5f5;
  width: 100%;
  height: 100%;
}

.sidebar {
  /* 其他样式 */
}

.content {
  flex: 1;
  width: calc(100% - 210px);
  overflow: hidden;
}

.top-bar {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.header,
.navbar {
  /* 定义样式 */
}

.page-content {
  flex: 1;
  /* padding: 20px; */
  height: calc(100% - 121px);
  box-sizing: border-box;
  background-color: rgba(237, 241, 245, 1);
}
.appBox {
  width: calc(100% - 40px) !important;
  margin-left: 20px;
  margin-top: 20px;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
